<template>
    <div class="clock-container" :style="{transform:`scale(${scale})`}">
      <xpFlipItem :total="2" :current="timeArr[0]"/>
      <xpFlipItem :total="9" :current="timeArr[1]"/>
      <div class="colon"></div>
      <xpFlipItem :total="5" :current="timeArr[2]"/>
      <xpFlipItem :total="9" :current="timeArr[3]"/>
      <div class="colon"></div>
      <xpFlipItem :total="5" :current="timeArr[4]"/>
      <xpFlipItem :total="9" :current="timeArr[5]"/>
    </div>
</template>
  

<script lang="ts">
import { reactive, toRefs, defineComponent, computed, onMounted } from 'vue';
import xpFlipItem from './xpFlipItem.vue';
import { getTimeArr } from './utils';
export default defineComponent({
    name: 'xpFlipClock',
    components: {
        xpFlipItem
    },
    props: {
        scale:{
            type:Number,
            default:2
        }
    },
    emits: [],
    setup (props, context) 
    {
        let data = reactive({
            timeArr: getTimeArr(),
            timer:null as any
        });
        let methods = {
            startTimer () 
            {
                data.timer = setTimeout(() => 
                {
                    this.stopTimer();
                    data.timeArr = getTimeArr();
                    methods.startTimer();
                }, 1000);
            },
            stopTimer () 
            {
                clearTimeout(data.timer);
            }
        };

        onMounted(() => 
        {
            methods.startTimer();
        });
        return {
            ...toRefs(data),
            ...methods
        };
    }
});
</script>
  
  <style lang='scss' scoped>
  .clock-container {
    display: flex;
    align-items: center;
    // transform: scale(2);
  }
  .colon {
    height: 50px;
    padding: 0 10px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    &::after,
    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 50%;
    }
  }
  </style>
  